<template>
	<view class="conter">
		<u-list @scrolltolower="scrolltolower" v-if="applyGuildList.length != 0">
			<u-list-item v-for="(item, index) in applyGuildList" :key="index">
				<view class="applicon_box">
					<view class="list_box">
						<view class="header_box">
							<!-- 头像 -->
							<u--image radius="50%" width="91rpx" height="91rpx" :src="imgUrl + item.memberHeaderImg" alt=""></u--image>
						</view>
						<view class="name_box">{{ item.memberName }}</view>
						<view class="cha_box">查看</view>
						<view class="button-box" @click="agree(item)">同意</view>
						<view class="button-box" style="background-color: #ff5359; color: #fff" @click="refuse(item)">拒绝</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<view style="position: absolute" v-if="applyGuildList.length == 0">
			<image style="width: 280rpx; height: 280rpx; margin: 275rpx 220rpx 0" src="../../static/images/fighting.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
import { getApplyGuildList, auditApplyGuild } from '@/api/union/union.js';
export default {
	data() {
		return {
			curPage: 1, //当前页
			curPageSize: 15, //当前页大小
			applyGuildList: [],
			totalSize: 0,
			applyId: 0,
			state: 1,
			guildId: 0,
			imgUrl: config.gillUrl
		};
	},
	onLoad(option) {
		this.guildId = option.guildId;
		this.getApplyList();
	},
	methods: {
		//工会成员列表
		async getApplyList() {
			let param = {};
			param.curPage = this.curPage;
			param.curPageSize = this.curPageSize;
			param.guildId = this.guildId;
			const data = await getApplyGuildList(param);
			let _this = this;
			data.data.pageData.map((i) => {
				_this.applyGuildList.push(i);
			});
			this.totalSize = data.data.totalSize;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.applyGuildList.length < this.totalSize) {
				this.curPage++;
				//则还有下一页
				this.getApplyList();
			}
		},
		golook(item) {
			uni.navigateTo({
				url: `/pages/Union/trousers?memberId=${item.memberId}`
			});
		},
		async agree(item) {
			let param = {};
			param.applyId = item.applyId;
			param.state = 1;
			const data = await auditApplyGuild(param);
			this.getApplyList();
			if (data.code == 200) {
				this.$modal.showToast('已同意');
				this.applyGuildList = [];
				this.getApplyList();
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		async refuse(item) {
			let param = {};
			param.applyId = item.applyId;
			param.state = 2;
			const data = await auditApplyGuild(param);
			this.getApplyList();
			if (data.code == 200) {
				this.$modal.showToast('已拒绝');
				this.applyGuildList = [];
				this.getApplyList();
			} else {
				this.$modal.showToast(data.msg);
			}
		}
	}
};
</script>

<style scoped lang="less">
page {
	background-color: #1a1a1a;
}
.conter {
	padding: 30rpx 34.88rpx;
	.applicon_box {
		width: 680rpx;
		padding: 24rpx 24rpx 0 24rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);
		.list_box {
			display: flex;
			width: 631rpx;
			height: 115rpx;
			background: #1b1b1b;
			margin-bottom: 24rpx;
			align-items: center;
			border-radius: 368rpx;
			padding: 0 20rpx 0 12rpx;
			border: 2rpx solid #2f2f2f;
			justify-content: space-between;
			.header_box {
				width: 91rpx;
				height: 91rpx;
				border-radius: 44rpx;
			}
			.name_box {
				width: 100rpx;
				color: #9e9e9e;
				font-size: 35rpx;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}
			.cha_box {
				color: #9e9e9e;
				font-size: 28rpx;
				font-weight: 400;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}
			.button-box {
				width: 136rpx;
				height: 73rpx;
				text-align: center;
				line-height: 75rpx;
				background: #eef862;
				border-radius: 38rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #353535;
			}
		}
	}
}
</style>
